<template>
    <div class="form-choice-question">

        <!--S问题-->
        <div id="question">
            <cube-input v-model="question"
                        placeholder="请输入问题"
                        :maxlength="50">
            </cube-input>

            <cube-button
                    class="add-option"
                    :inline="true"
                    icon="cubeic-add"
                    @click="addOption"
                    >
                添加选项
            </cube-button>

        </div>
        <!--E问题-->

        <!--S选项-->
        <div id="options">
            <cube-input
                    v-for="(item,index) in options"
                    v-model="item.model"
                    :key="index"
                    :maxlength="30"
                    :placeholder="'请设置选项'+(index+1)">

                <!--S删除选项-->
                <template v-if="index > 1" v-slot:prepend>
                    <i class="remove-option cubeic-remove"
                       @click="removeOption(index)">
                    </i>
                </template>
                <!--E删除选项-->

                <!--S正确答案选项-->
                <template v-slot:append>
                    <cube-checkbox
                            v-model="item.answer"
                            :option="{label:'正确'}"
                            @input="correctChange(index)"
                    >
                    </cube-checkbox>
                </template>
                <!--E正确答案选项-->
            </cube-input>
        </div>
        <!--E选项-->

    </div>
</template>

<script>
// 选择题  数据结构  array(问题、正确答案下标、答案选项1、答案选项2、答案选项3...)
export default {
    name: "form-choice-question",
    data() {
        return {
            // 问题
            question: '',
            // 选择题选项
            options: [
                {
                    model:"",
                    answer:true
                },
                {
                    model:"",
                    answer:false
                }
            ]
        }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
          type: Array,
          default () {
              return []
          }
      }
    },
    computed: {
        //数据
        data(){
            let data = [this.question,0];
            this.options.forEach((item,index)=>{
                if(item.answer) data[1] = index;
                data.push(item.model);
            });
            return data;
        }
    },
    watch: {
        data (value) {
            this.$emit("change",value)
        }
    },
    mounted() {
        this.initValue()
    },
    methods: {
        /**
         * 初始化value
         */
        initValue(){
          this.question = this.value[0]
          this.options = []
          for(let i=2;i<this.value.length;i++){
            this.options.push({
                model: this.value[i],
                answer: i-2 === parseInt(this.value[1])
            })
          }
        },
        /**
         * 添加选项
         */
        addOption() {
            this.options.push({
                model: '',
                answer: false
            })
        },
        /**
         * 移除选项
         */
        removeOption(index) {
            if(this.options[index].answer){
                this.options[0].answer = true
            }
            this.options.splice(index,1)
        },
        /**
         * 设置正确答案
         */
        correctChange(_index) {
            this.options.forEach((item,index)=>{
                if(_index !== index){
                    item.answer = false;
                }else{
                    item.answer = true;
                }
            });
        }
    }
}
</script>

<style scoped lang="less">
    @import "@/theme.less";
    .form-choice-question{
        #question{
            position: relative;
            padding-right: 100px;
            box-sizing: border-box;
            .add-option{
                position: absolute;
                right: 0;
                top:5px;
            }
        }
        #options{
            .remove-option{
                color: @assist-color1;
                font-size: @font-huge;
            }
        }
    }
</style>
